<template>
  <div>
      <el-card>
          <el-input placeholder="请输入场馆状态（true or false）、名称或地址查询场馆" v-model="selectinput" class="input-with-select" clearable @clear="getvenues()">
            <el-button slot="append" icon="el-icon-search" @click="selectVenue()"></el-button>
          </el-input>
          <!-- <el-button type="primary" style="margin-bottom:10px; float:right" @click="addDialogVisible=true">添加场馆</el-button> -->
        <el-table :data="Venuelist" style="width: 100%;margin-bottom:20px;margin-top:20px" :row-class-name="tableRowClassName" stripe border>
            <el-table-column prop="venuenumber" label="场馆编号" width="170" fixed></el-table-column>
            <el-table-column prop="venuename" label="场馆名称" min-width="150"></el-table-column>
            <el-table-column prop="venuetype" label="场馆类型" min-width="120"></el-table-column>
            <el-table-column prop="venuepnumber" label="联系电话" min-width="130"></el-table-column>
            <el-table-column prop="venueindirect" label="场馆简介" width="400"> </el-table-column>
            <el-table-column prop="venuearea" label="场馆面积" width="80"> </el-table-column>
            <el-table-column prop="venuepeople" label="容纳人数" width="80"> </el-table-column>
            <el-table-column prop="venuedtime" label="营业时间" width="100"> </el-table-column>
            <el-table-column prop="venuebtime" label="建成时间" width="100"> </el-table-column>
            <el-table-column prop="venueattention" label="注意事项" width="200"> </el-table-column>
            <el-table-column prop="venuemoney" label="租用单价/小时" width="115"> </el-table-column>
            <el-table-column prop="venueisfree" label="是否免费" width="80"> </el-table-column>
            <el-table-column prop="venueopen" label="是否对外开放" width="110"> </el-table-column>
            <el-table-column prop="venuesite" label="场馆地址" width="300"> </el-table-column>
            <!-- <el-table-column label="配备场地" min-width="95">
                <template slot-scope="scope">
                    <el-button @click="getvenue(scope.row.managementnumber)">查看</el-button>
                </template>
            </el-table-column> -->
            <el-table-column prop="state" label="状态" width="auto">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.state" disabled active-value="true"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="282px" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑场馆状态</el-button>
                    <el-button type="danger" size="mini" @click="deleteVenue(scope.row.id)">删除</el-button>
                    <el-button type="success" size="mini" @click="getfield(scope.row.venuenumber)">查看场地</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.pagenum"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="this.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-card>

      <!-- 添加场馆对话框 -->
    <el-dialog
      title="添加场馆"
      :visible.sync="addDialogVisible"
      width="50%" @close="addDialogClosed">
      <!-- 内容主体区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="110px">
        <el-form-item label="场馆编号" prop="venuenumber">
          <el-input v-model="addForm.venuenumber"></el-input>
        </el-form-item>
        <el-form-item label="场馆名称" prop="venuename">
          <el-input v-model="addForm.venuename"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="venuepnumber">
          <el-input v-model="addForm.venuepnumber"></el-input>
        </el-form-item>
        <el-form-item label="场馆类型" prop="venuetype">
            <el-select v-model="value1" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="场馆面积" prop="venuearea">
          <el-input v-model="addForm.venuearea"></el-input>
        </el-form-item>
        <el-form-item label="容纳人数" prop="venuepeople">
          <el-input v-model="addForm.venuepeople"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="venuedtime">
          <el-input v-model="addForm.venuedtime"></el-input>
        </el-form-item>
        <el-form-item label="建成时间" prop="venuebtime">
          <el-input v-model="addForm.venuebtime"></el-input>
        </el-form-item>
        <el-form-item label="注意事项" prop="venueattention">
          <el-input v-model="addForm.venueattention"></el-input>
        </el-form-item>
        <el-form-item label="租用单价/小时" prop="venuemoney">
          <el-input v-model="addForm.venuemoney"></el-input>
        </el-form-item>
        <el-form-item label="是否免费" prop="venueisfree">
          <el-select v-model="value2" placeholder="请选择">
              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否对外开放" prop="venueopen">
          <el-select v-model="value3" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="场馆地址" prop="venuesite">
          <el-input v-model="addForm.venuesite"></el-input>
        </el-form-item>
        <el-form-item label="场馆简介" prop="venueindirect">
          <el-input v-model="addForm.venueindirect" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="场馆状态">
            <template>
              <el-switch v-model="value" @change="userStateChange()" active-color="#13ce66" inactive-color="#ff4949" active-value="true" inactive-value="false" active-text="无操作默认启动"></el-switch>
            </template>
        </el-form-item>
      </el-form>
        <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserInfo">确 定</el-button>
      </span>
    </el-dialog>
       <!-- 编辑场馆对话框 -->
        <el-dialog
        title="编辑场馆"
        :visible.sync="editDialogVisible"
        width="50%" @close="editDialogClosed">
        <!-- 内容主体区 -->
        <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
            <el-form-item label="场馆编号" prop="venuenumber">
            <el-input v-model="editForm.venuenumber" disabled></el-input>
            </el-form-item>
            <el-form-item label="场馆名称" prop="venuename">
            <el-input v-model="editForm.venuename" disabled></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="venuepnumber">
            <el-input v-model="editForm.venuepnumber" disabled></el-input>
            </el-form-item>
            <el-form-item label="场馆类型" prop="venuetype">
                <el-select v-model="value1" placeholder="请选择" disabled>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="场馆面积" prop="venuearea">
            <el-input v-model="editForm.venuearea" disabled></el-input>
            </el-form-item>
            <el-form-item label="容纳人数" prop="venuepeople">
            <el-input v-model="editForm.venuepeople" disabled></el-input>
            </el-form-item>
            <el-form-item label="营业时间" prop="venuedtime">
            <el-input v-model="editForm.venuedtime" disabled></el-input>
            </el-form-item>
            <el-form-item label="建成时间" prop="venuebtime">
            <el-input v-model="editForm.venuebtime" disabled></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="venueattention">
            <el-input v-model="editForm.venueattention" disabled></el-input>
            </el-form-item>
            <el-form-item label="租用单价/小时" prop="venuemoney">
            <el-input v-model="editForm.venuemoney" disabled></el-input>
            </el-form-item>
            <el-form-item label="是否免费" prop="venueisfree">
            <el-select v-model="value2" placeholder="请选择" disabled>
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="是否对外开放" prop="venueopen">
            <el-select v-model="value3" placeholder="请选择" disabled>
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="场馆地址" prop="venuesite">
            <el-input v-model="editForm.venuesite" disabled></el-input>
            </el-form-item>
            <el-form-item label="场馆简介" prop="venueindirect">
            <el-input v-model="editForm.venueindirect" type="textarea" disabled></el-input>
            </el-form-item>
            <el-form-item label="场馆状态">
                <template>
                <el-switch v-model="value" @change="userStateChange()" active-color="#13ce66" inactive-color="#ff4949" active-value="true" inactive-value="false" active-text="无操作默认不改动"></el-switch>
                </template>
            </el-form-item>
        </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>

      <!-- 管理场馆查询页面 -->
      <el-dialog title="查询管理场馆"
        :visible.sync="getDialogVisible"
        width="90%" @close="editDialogClosed">
        <!-- 内容主体区 -->
          <el-card style="margin-top:0px">
            <el-table :data="venuelist" bvenue style="width: 100%" :row-class-name="tableRowClassName" stripe border>
              <el-table-column prop="venuenumber" label="场馆编号" width="165" fixed></el-table-column>
              <el-table-column prop="venuename" label="场馆名称" min-width="190"></el-table-column>
              <el-table-column prop="venuetype" label="场馆类型" min-width="120"></el-table-column>
              <el-table-column prop="venuepnumber" label="联系电话" min-width="140"></el-table-column>
              <el-table-column prop="venueindirect" label="场馆简介" width="220"> </el-table-column>
              <el-table-column prop="venuearea" label="场馆面积(平方米)" width="80"> </el-table-column>
              <el-table-column prop="venuepeople" label="容纳人数" width="90"> </el-table-column>
              <el-table-column prop="venuefieldnumber" label="配备场地编号" width="170"> </el-table-column>
              <el-table-column prop="venuemanagement" label="隶属场馆编号" width="140"> </el-table-column>
              <el-table-column prop="venuedtime" label="营业时间" width="100"> </el-table-column>
              <el-table-column prop="venuebtime" label="建成时间" width="100"> </el-table-column>
              <el-table-column prop="venueattention" label="注意事项" width="220"> </el-table-column>
              <el-table-column prop="venuemoney" label="租用单价/小时" width="115"> </el-table-column>
              <el-table-column prop="venueisfree" label="是否免费" width="80"> </el-table-column>
              <el-table-column prop="venueopen" label="是否对外开放" width="110"> </el-table-column>
              <el-table-column prop="venuesite" label="场馆地址" width="220"> </el-table-column>
              <el-table-column prop="state" label="场馆状态" width="auto">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.state" disabled active-value="true"></el-switch>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="this.pagenum1"
              :page-sizes="[5, 10, 20, 50]"
              :page-size="this.pagesize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1">
            </el-pagination>
            <el-button type="primary" style="margin-bottom:10px;float:right" @click="getDialogVisible=false">关闭</el-button>
          </el-card>
      </el-dialog>

      <!-- 查看场地对话框 -->
      <el-dialog title="查看场地" :visible.sync="fieldDialogVisible"
        width="90%" @close="editDialogClosed">
         <!-- <el-button type="primary" style="margin-bottom:20px;float:right" @click="addfield()">添加场地</el-button> -->
         <el-table :data="Fieldlist" style="width: 100%;margin-bottom:20px;margin-top:20px" :row-class-name="tableRowClassName" stripe border>
            <el-table-column prop="fieldnumber" label="场地编号" width="170" fixed></el-table-column>
            <el-table-column prop="fieldname" label="场地名称" min-width="auto"></el-table-column>
            <el-table-column prop="fieldtype" label="场地类型" min-width="auto"></el-table-column>
            <el-table-column prop="fieldarea" label="面积" min-width="60"></el-table-column>
            <el-table-column prop="fieldpeople" label="容纳人数" width="auto"> </el-table-column>
            <el-table-column prop="fieldtime" label="建成时间" width="100"> </el-table-column>
            <el-table-column prop="fieldattention" label="注意事项" width="190"> </el-table-column>
            <el-table-column prop="fieldisfree" label="是否可免费试用" width="auto"> </el-table-column>
            <el-table-column prop="fieldmoney" label="使用单价/小时" width="auto"> </el-table-column>
            <el-table-column label="操作" width="283px" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showfieldEditDialog(scope.row.id)">编辑场地状态</el-button>
                <el-button type="danger" size="mini" @click="deleteField(scope.row.id)">删除</el-button>
                <el-button type="success" size="mini" @click="showEquipment(scope.row.fieldnumber)">配备设备</el-button>
                <!-- <el-button type="warning" size="mini" @click="showaddEquipment(scope.row.fieldnumber)">添加设备</el-button> -->
              </template>
            </el-table-column>
          </el-table>
      </el-dialog>

      <!-- 添加场地对话框 -->
      <el-dialog title="添加场地" :visible.sync="addfieldvisable"
        width="50%" @close="addfieldDialogClosed">
         <el-form :model="addfieldForm" :rules="addfieldFormRules" ref="addfieldFormRef" label-width="130px">
          <el-form-item label="场地编号" prop="fieldnumber">
            <el-input v-model="addfieldForm.fieldnumber"></el-input>
          </el-form-item>
          <el-form-item label="场馆名称" prop="fieldname">
            <el-input v-model="addfieldForm.fieldname"></el-input>
          </el-form-item>
          <el-form-item label="场地类型" prop="fieldtype">
            <el-input v-model="addfieldForm.fieldtype"></el-input>
          </el-form-item>
          <el-form-item label="场地面积" prop="fieldarea">
            <el-input v-model="addfieldForm.fieldarea"></el-input>
          </el-form-item>
          <el-form-item label="容纳人数" prop="fieldpeople">
            <el-input v-model="addfieldForm.fieldpeople"></el-input>
          </el-form-item>
          <el-form-item label="建成时间" prop="fieldtime">
            <el-input v-model="addfieldForm.fieldtime"></el-input>
          </el-form-item>
          <el-form-item label="注意事项" prop="fieldattention">
            <el-input v-model="addfieldForm.fieldattention"></el-input>
          </el-form-item>
          <el-form-item label="是否可免费使用" prop="fieldisfree">
            <el-select v-model="value3" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="使用单价/小时" prop="fieldmoney">
            <el-input v-model="addfieldForm.fieldmoney"></el-input>
          </el-form-item>
         </el-form>
          <!-- 底部区 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="addfieldvisable = false">取 消</el-button>
            <el-button type="primary" @click="addFields()">确 定</el-button>
          </span>
      </el-dialog>

      <!-- 编辑场地对话框 -->
        <el-dialog
        title="编辑场地"
        :visible.sync="editfieldDialogVisible"
        width="50%" @close="editfieldDialogClosed">
        <!-- 内容主体区 -->
        <el-form :model="editfieldForm" :rules="editfieldFormRules" ref="editfieldFormRef" label-width="130px">
            <el-form-item label="场地编号" prop="fieldnumber">
            <el-input v-model="editfieldForm.fieldnumber"></el-input>
            </el-form-item>
            <el-form-item label="场馆名称" prop="fieldname">
            <el-input v-model="editfieldForm.fieldname"></el-input>
            </el-form-item>
            <el-form-item label="场地类型" prop="fieldtype">
            <el-input v-model="editfieldForm.fieldtype"></el-input>
            </el-form-item>
            <el-form-item label="场地面积" prop="fieldarea">
            <el-input v-model="editfieldForm.fieldarea"></el-input>
            </el-form-item>
            <el-form-item label="容纳人数" prop="fieldpeople">
            <el-input v-model="editfieldForm.fieldpeople"></el-input>
            </el-form-item>
            <el-form-item label="建成时间" prop="fieldtime">
            <el-input v-model="editfieldForm.fieldtime"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="fieldattention">
            <el-input v-model="editfieldForm.fieldattention"></el-input>
            </el-form-item>
            <el-form-item label="使用单价/小时" prop="fieldmoney">
            <el-input v-model="editfieldForm.fieldmoney"></el-input>
            </el-form-item>
            <el-form-item label="是否可免费使用" prop="fieldisfree">
            <el-select v-model="value3" placeholder="请选择">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editfieldDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editfieldInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查看设备对话框 -->
      <el-dialog title="查看设备" :visible.sync="equipmentDialogVisible"
        width="80%">
         <!-- <el-button type="primary" style="margin-bottom:20px;float:right" @click="addequipmentvisable = true">添加设备</el-button> -->
         <el-table :data="Equipmentlist" style="width: 100%;margin-bottom:20px;margin-top:20px" :row-class-name="tableRowClassName" stripe border>
            <el-table-column prop="equipmentnumber" label="设备编号" width="100" fixed></el-table-column>
            <el-table-column prop="equipmentname" label="设备名称" min-width="auto"></el-table-column>
            <el-table-column prop="equipmenttype" label="设备类型" min-width="auto"></el-table-column>
            <el-table-column prop="equipmentpurpose" label="设备用途" min-width="auto"></el-table-column>
            <el-table-column prop="equipmentattention" label="注意事项" width="auto"> </el-table-column>
            <el-table-column prop="equipmenttime" label="购置时间" width="100"> </el-table-column>
            <el-table-column prop="equipmentisnormal" label="是否可正常使用" width="120"> </el-table-column>
            <el-table-column prop="equipmentisfree" label="是否可免费使用" width="120"> </el-table-column>
            <el-table-column prop="equipmentmoney" label="使用单价/小时" width="120"> </el-table-column>
            <el-table-column label="操作" width="80px" fixed="right">
              <template slot-scope="scope">
                <!-- <el-button type="primary" size="mini" @click="showEquipmentEditDialog(scope.row.id)">编辑</el-button> -->
                <el-button type="danger" size="mini" @click="deleteEquipment(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-dialog>

      <!-- 添加设备对话框 -->
      <el-dialog title="添加设备" :visible.sync="addequipmentvisable"
        width="50%" @close="addequipmentDialogClosed">
         <el-form :model="addequipmentForm" :rules="addequipmentFormRules" ref="addequipmentFormRef" label-width="130px">
          <el-form-item label="设备编号" prop="equipmentnumber">
            <el-input v-model="addequipmentForm.equipmentnumber"></el-input>
          </el-form-item>
          <el-form-item label="设备名称" prop="equipmentname">
            <el-input v-model="addequipmentForm.equipmentname"></el-input>
          </el-form-item>
          <el-form-item label="设备类型" prop="equipmenttype">
            <el-input v-model="addequipmentForm.equipmenttype"></el-input>
          </el-form-item>
          <el-form-item label="设备用途" prop="equipmentpurpose">
            <el-input v-model="addequipmentForm.equipmentpurpose"></el-input>
          </el-form-item>
          <el-form-item label="注意事项" prop="equipmentattention">
            <el-input v-model="addequipmentForm.equipmentattention"></el-input>
          </el-form-item>
          <el-form-item label="购置时间" prop="equipmenttime">
            <el-input v-model="addequipmentForm.equipmenttime"></el-input>
          </el-form-item>
          <el-form-item label="是否可正常使用" prop="equipmentisnormal">
            <el-select v-model="value3" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="是否可免费使用" prop="equipmentisfree">
            <el-select v-model="value4" placeholder="请选择">
              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="使用单价/小时" prop="equipmentmoney">
            <el-input v-model="addequipmentForm.equipmentmoney"></el-input>
          </el-form-item>
         </el-form>
          <!-- 底部区 -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="addequipmentvisable = false">取 消</el-button>
            <el-button type="primary" @click="addequipment()">确 定</el-button>
          </span>
      </el-dialog>

      <!-- 编辑设备对话框 -->
        <el-dialog
        title="编辑设备"
        :visible.sync="editequipmentDialogVisible"
        width="50%">
        <!-- 内容主体区 -->
        <el-form :model="editequipmentForm" :rules="editequipmentFormRules" ref="editequipmentFormRef" label-width="130px">
            <el-form-item label="设备编号" prop="equipmentnumber">
            <el-input v-model="editequipmentForm.equipmentnumber"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="equipmentname">
            <el-input v-model="editequipmentForm.equipmentname"></el-input>
            </el-form-item>
            <el-form-item label="设备类型" prop="equipmenttype">
            <el-input v-model="editequipmentForm.equipmenttype"></el-input>
            </el-form-item>
            <el-form-item label="设备用途" prop="equipmentpurpose">
            <el-input v-model="editequipmentForm.equipmentpurpose"></el-input>
            </el-form-item>
            <el-form-item label="注意事项" prop="equipmentattention">
            <el-input v-model="editequipmentForm.equipmentattention"></el-input>
            </el-form-item>
            <el-form-item label="购置时间" prop="equipmenttime">
            <el-input v-model="editequipmentForm.equipmenttime"></el-input>
            </el-form-item>
            <el-form-item label="使用单价/小时" prop="equipmentmoney">
            <el-input v-model="editequipmentForm.equipmentmoney"></el-input>
            </el-form-item>
            <el-form-item label="是否可正常使用" prop="equipmentisnormal">
            <el-select v-model="value3" placeholder="请选择">
              <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="是否可免费使用" prop="equipmentisfree">
              <el-select v-model="value4" placeholder="请选择">
                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
      <!-- 底部区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editequipmentDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editequipmentInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {

    data () {

      return {

        options: [{
          value: '图书馆类',
          label: '图书馆类'
        }, {
          value: '博物馆类',
          label: '博物馆类'
        }, {
          value: '纪念馆类',
          label: '纪念馆类'
        }, {
          value: '美术馆类',
          label: '美术馆类'
        }, {
          value: '文化馆（站）类',
          label: '文化馆（站）类'
        }, {
          value: '体育场（馆）类',
          label: '体育场（馆）类'
        }, {
          value: '青少年宫类',
          label: '青少年宫类'
        }, {
          value: '工人文化宫类',
          label: '工人文化宫类'
        }, {
          value: '其他场馆类',
          label: '其他场馆类'
        }],

        value1:'',


         options1: [{
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        }, {
          value: '部分免费',
          label: '部分免费'
        }],

        value2:'',


         options2: [{
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        }],

        value3:'',

        options3: [{
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        }],

        value4:'',

          Venue: null,

          newstate:'',

            // 当前的页数
            pagenum:1,
            // 当前每页显示多少条数据
            pagesize:10,
            // 普通场馆等级
            query:'',

            Venuelist: [],
            total: 0,

            Fieldlist:[],


            Equipmentlist:[],


            // 当前的页数
            pagenum1:1,
            // 当前每页显示多少条数据
            pagesize1:7,
            // 普通场馆等级
            query1:'',
            total1: 0,


            addDialogVisible:false,

            fieldDialogVisible:false,

            addfieldvisable:false,

            editfieldDialogVisible:false,

            equipmentDialogVisible:false,

            addequipmentvisable:false,

            editequipmentDialogVisible:false,

            // 添加场馆的表单数据
        addForm: {
            managementnumber: '',
            managementname: '',
            managementphone: '',
            managementtype: '',
            managementaddress: '',
            managementindirect: '',
            managementvenuenumber: ''

        },

        //添加场地的表单数据
        addfieldForm: {
            fieldarea: '',
            fieldattention: '',
            fieldisfree: '',
            fieldmoney: '',
            fieldname: '',
            fieldnumber: '',
            fieldpeople: '',
            fieldtime: '',
            fieldtype: '',
            fieldvenuenumber: ''
        },

        //添加设备的表单数据
        addequipmentForm: {
            equipmentnumber: '',
            equipmentattention: '',
            equipmentfield: '',
            equipmentisfree: '',
            equipmentisnormal: '',
            equipmentmoney: '',
            equipmentname: '',
            equipmentpurpose: '',
            equipmenttime: '',
            equipmenttype: ''
        },
        value:'',
        // 添加表单的验证规则对象
        addFormRules: {
            venuenumber: [
            { required: true, message: '请输入场馆编号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号的长度在3~20个字符之间', trigger: 'blur' }
            ],
            venuename: [
            { required: true, message: '请输入场馆名称', trigger: 'blur' },
            { min: 2, max: 30, message: '名字的长度在2~30个字符之间', trigger: 'blur' }
            ],
            venuepnumber: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { min: 3, max: 20, message: '联系电话的长度在3~20个字符', trigger: 'blur' }
            ],
            venuetype: [
            { required: true, message: '请输入场馆类型', trigger: 'blur' }
            ],
            venuedtime: [
            { required: true, message: '请输入营业时间', trigger: 'blur' }
            ],
            venueisfree: [
            { required: true, message: '请输入是否免费', trigger: 'blur' }
            ],
            venueopen: [
            { required: true, message: '请输入是否对外开放', trigger: 'blur' }
            ],
            venuesite: [
            { required: true, message: '请输入场馆地址', trigger: 'blur' },
            { min: 2, max: 200, message: '手机号的长度在2~200个字符之间', trigger: 'blur' }
            ]
        },

         // 控制修改场馆对话框的显示与隐藏
        editDialogVisible: false,
        // 查询到场馆信息对象
        editForm: {},
        // 修改表单的验证规则对象
        editFormRules: {
            venuenumber: [
            { required: true, message: '请输入场馆编号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号的长度在3~20个字符之间', trigger: 'blur' }
            ],
            venuename: [
            { required: true, message: '请输入场馆名称', trigger: 'blur' },
            { min: 2, max: 30, message: '名字的长度在2~30个字符之间', trigger: 'blur' }
            ],
            venuetype: [
            { required: true, message: '请输入场馆类型', trigger: 'blur' }
            ],
            venuedtime: [
            { required: true, message: '请输入营业时间', trigger: 'blur' }
            ],
            venueisfree: [
            { required: true, message: '请输入是否免费', trigger: 'blur' }
            ],
            venueopen: [
            { required: true, message: '请输入是否对外开放', trigger: 'blur' }
            ],
            venuesite: [
            { required: true, message: '请输入场馆地址', trigger: 'blur' }
            ],
            venuepnumber: [
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { min: 3, max: 20, message: '联系电话的长度在3~20个字符', trigger: 'blur' }
            ],
            managementaddress: [
            { required: true, message: '请输入场馆地址', trigger: 'blur' },
            { min: 2, max: 50, message: '手机号的长度在2~50个字符之间', trigger: 'blur' }
            ]
        },

        addfieldFormRules:{
            fieldnumber: [
            { required: true, message: '请输入场地编号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号的长度在3~20个字符之间', trigger: 'blur' }
            ],
            fieldname: [
            { required: true, message: '请输入场地名称', trigger: 'blur' },
            { min: 2, max: 30, message: '名字的长度在2~30个字符之间', trigger: 'blur' }
            ],
            fieldtype: [
            { required: true, message: '请输入场地类型', trigger: 'blur' }
            ],
            fieldisfree: [
            { required: true, message: '请输入是否免费', trigger: 'blur' }
            ]
        },

        editfieldForm:{},

        editfieldFormRules:{
            fieldnumber: [
            { required: true, message: '请输入场地编号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号的长度在3~20个字符之间', trigger: 'blur' }
            ],
            fieldname: [
            { required: true, message: '请输入场地名称', trigger: 'blur' },
            { min: 2, max: 30, message: '名字的长度在2~30个字符之间', trigger: 'blur' }
            ],
            fieldtype: [
            { required: true, message: '请输入场地类型', trigger: 'blur' }
            ],
            fieldisfree: [
            { required: true, message: '请输入是否免费', trigger: 'blur' }
            ]
        },

        addequipmentFormRules:{
            equipmentnumber: [
            { required: true, message: '请输入设备编号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号的长度在3~20个字符之间', trigger: 'blur' }
            ],
            equipmentname: [
            { required: true, message: '请输入设备名称', trigger: 'blur' },
            { min: 2, max: 30, message: '名字的长度在2~30个字符之间', trigger: 'blur' }
            ],
            equipmenttype: [
            { required: true, message: '请输入设备类型', trigger: 'blur' }
            ],
            equipmentpurpose: [
            { required: true, message: '请输入设备用途', trigger: 'blur' }
            ],
            equipmentisnormal: [
            { required: true, message: '请输入是否可正常使用', trigger: 'blur' }
            ],
            equipmentisfree: [
            { required: true, message: '请输入是否免费使用', trigger: 'blur' }
            ]
        },


        editequipmentForm:{},

        editequipmentFormRules:{
            equipmentnumber: [
            { required: true, message: '请输入设备编号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号的长度在3~20个字符之间', trigger: 'blur' }
            ],
            equipmentname: [
            { required: true, message: '请输入设备名称', trigger: 'blur' },
            { min: 2, max: 30, message: '名字的长度在2~30个字符之间', trigger: 'blur' }
            ],
            equipmenttype: [
            { required: true, message: '请输入设备类型', trigger: 'blur' }
            ],
            equipmentpurpose: [
            { required: true, message: '请输入设备用途', trigger: 'blur' }
            ],
            equipmentisnormal: [
            { required: true, message: '请输入是否可正常使用', trigger: 'blur' }
            ],
            equipmentisfree: [
            { required: true, message: '请输入是否免费使用', trigger: 'blur' }
            ]
        },

        getDialogVisible:false,

        venuelist:[],

        selectinput:''

        
      }
    },
    created() {
        this.getvenues()

    },
    methods: {

        //获取场馆列表?pagenum=1&pagesize=5&query=0
        getvenues () {
            
            this.getRequest('/venue/venues/?pagenum='+this.pagenum+'&pagesize='+this.pagesize+'&query='+this.query).then(resp => {
                // console.log(resp)
                this.Venuelist = resp.data.current_data
                this.total = resp.data.total
            })
        },

        //获取场地列表
        getfield(id) {
            this.addfieldForm.fieldvenuenumber=id
            this.getRequest('/field/'+id).then(resp => {
              this.Fieldlist=resp.data
              console.log(id)
              this.fieldDialogVisible=true
            })

        },


        //添加场地
        addfield() {
            this.addfieldvisable=true
        },


        //确认添加场地
        addFields() {
          this.addfieldForm.fieldisfree=this.value3
            this.$refs.addfieldFormRef.validate(valid => {
                if (valid) {
                    this.postRequest('/field',this.addfieldForm).then(resp => {
                        if (resp.code==201) {
                        this.fieldDialogVisible=false
                        this.addfieldvisable=false
                        }
                        return false
                    })
                } else {
                    this.$message.error('请输入必要信息！')
                    return false
                }
            })
        },


        //编辑场地
        showfieldEditDialog(id) {
          this.postRequest('/field/message/'+id).then(resp => {
            this.editfieldForm=resp.data
            this.value3=this.editfieldForm.fieldisfree
          })
            this.editfieldDialogVisible=true
        },

        //确认编辑场地
        editfieldInfo() {
          this.editfieldForm.fieldisfree=this.value3
          this.putRequest('/field/updata',this.editfieldForm).then(resp => {
            this.editfieldDialogVisible=false
            this.fieldDialogVisible=false
            
          })
        },

        //删除场地
        deleteField(id) {
            this.deleteRequest('/field/'+id).then(resp => {
              this.fieldDialogVisible=false
            })
        },

        //删除场馆
        deleteVenue (id) {
            this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {

            this.deleteRequest('/venue/'+id).then(resp => {
                this.getvenues()
            }) 
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
            
        },
        //账号状态
        VenueStateChange() {
            this.addForm.state=this.value
            this.editForm.state=this.value
        },

        //添加场馆
        addUserInfo() {
            this.addForm.venuetype=this.value1
            this.addForm.venueisfree=this.value2
            this.addForm.venueopen=this.value3
            this.$refs.addFormRef.validate(valid => {
                if (valid) {
                    this.postRequest('/venue',this.addForm).then(resp => {
                        if (resp.code==201) {
                        this.getvenues()
                        this.addDialogVisible=false
                        }
                        return false
                    })
                } else {
                    this.$message.error('请输入必要信息！')
                    return false
                }
            })
        },


        //账号状态
        userStateChange() {
            this.addForm.state=this.value
            this.editForm.state=this.value
        },


        //修改普通场馆
        showEditDialog(id) {
            this.postRequest('/venue/message/'+id).then(resp => {
                this.editForm=resp.data
                this.value1=this.editForm.venuetype
                this.value2=this.editForm.venueisfree
                this.value3=this.editForm.venueopen
                console.log(resp)
                this.editDialogVisible=true
            })
        },

        
        //确定修改普通场馆
        editUserInfo() {
            this.editForm.venuetype=this.value1
            this.editForm.venueisfree=this.value2
            this.editForm.venueopen=this.value3
            this.$refs.editFormRef.validate(valid => {
                if (valid) {
                    this.putRequest('/venue/updata',this.editForm).then(resp => {
                        this.getvenues()
                        this.editDialogVisible=false
                        
                    })
                } else {
                    this.$message.error('请输入必要信息！')
                    return false
                }
            })
        },

        //查看场馆通过场馆编号
        getvenue(id) {
            
            this.getRequest('/venue/'+id).then(resp => {
              this.venuelist=resp.data
              this.total1 = resp.data.total
              this.getDialogVisible=true
              // console.log(this.venuelist.state)
            })
        },

        //根据名称、类型或位置查询场馆
        selectVenue() {
            if (this.selectinput.length=='0') {
              this.$message.error('请输入场馆状态（true or false）、名称或地址开始查询！')
              
            return false
            } else {
                this.getRequest('/venue/venues/?pagenum='+this.pagenum+'&pagesize='+this.pagesize+'&query='+this.selectinput).then(resp => {
                this.Venuelist=resp.data.current_data
              })
            }
            
        },

        //通过场地编号获取设备
        showEquipment(id) {
            this.getRequest('/equipment/'+id).then(resp => {
              if (resp.data.length==0) {
                this.$message.error('该场地无设备')
              }
              this.Equipmentlist=resp.data
              this.addequipmentForm.equipmentfield=this.Equipmentlist[0].equipmentfield
              console.log(resp)
              this.equipmentDialogVisible=true
            })
        },

        //显示添加设备对话框
        showaddEquipment(id) {
          this.addequipmentForm.equipmentfield=id
          this.addequipmentvisable=true

        },

        //添加设备
        addequipment() {
            this.addequipmentForm.equipmentisnormal=this.value3
            this.addequipmentForm.equipmentisfree=this.value4
            this.postRequest('/equipment',this.addequipmentForm).then(resp => {
              if (resp.code==201) {
                this.addequipmentvisable=false
                this.equipmentDialogVisible=false
                }
              
            })
        },

        //显示设备编辑对话框
        showEquipmentEditDialog(id) {
            this.postRequest('/equipment/message/'+id).then(resp => {
              this.editequipmentForm=resp.data
              this.value3=this.editequipmentForm.equipmentisnormal
              this.value4=this.editequipmentForm.equipmentisfree
              // console.log(resp)
              this.editequipmentDialogVisible=true
            })
        },

        //确定编辑
        editequipmentInfo () {
          this.editequipmentForm.equipmentisfree=this.value4
          this.editequipmentForm.equipmentisnormal=this.value3
          this.putRequest('/equipment/updata',this.editequipmentForm).then(resp => {
            this.editequipmentDialogVisible=false
            this.equipmentDialogVisible=false
          })
        },

        //删除设备
        deleteEquipment(id) {
          this.deleteRequest('/equipment/'+id).then(resp => {
            this.equipmentDialogVisible=false

          })
        },

        //添加设备
        addEquipment(id) {
            this.postRequest('/equipment',)
        },



        // 监听 pagesize 改变的事件
        handleSizeChange(newSize) {
        // console.log(newSize)
        this.pagesize = newSize
        this.getvenues()
        },
        // 监听 页码值 改变的事件
        handleCurrentChange(newPage) {
        //   console.log(newPage)
        this.pagenum = newPage
        this.getvenues()
        },


        // 监听 pagesize1 改变的事件
        handleSizeChange1(newSize) {
        // console.log(newSize)
        this.pagesize1 = newSize

        },
        // 监听 页码值 改变的事件
        handleCurrentChange1(newPage) {
        //   console.log(newPage)
        this.pagenum1 = newPage
        
        },

        // 监听添加场馆对话框的关闭事件
        addDialogClosed() {
        this.$refs.addFormRef.resetFields()
        },
        // 监听修改场馆对话框的关闭事件
        editDialogClosed() {
          this.$refs.editFormRef.resetFields()
        },
        addfieldDialogClosed() {
          this.$refs.addfieldFormRef.resetFields()
        },
        editfieldDialogClosed() {
          this.$refs.editfieldFormRef.resetFields()
        },
        addequipmentDialogClosed() {
          this.$refs.addequipmentFormRef.resetFields()
        }
    }
}
</script>

<style lang="less" scoped>
.el-card {
    margin-top:20px;
}

.input-with-select {
    width: 45%;
}
</style>>
